<template>
  <div class="audio-info">
   <d-list @load="getMoreData" :finished="!isLoadMore" :loading="loading" :showStatusText="true">
    <div class="top">
      <i class="iconfont icon-fanhui" @click="goBack"></i>
    </div>
    <div class="logo">
      <img :src="audio_img || emptyImage" alt="">
    </div>
    <div class="audio-info-middle">
        <div class="message">{{audio_title}}</div>
        <div class="audio" @click="handleChangeAudioVolume">
         <audio-player ref="audio" class="audio-box" :fileurl="fileurl"></audio-player>
        </div>
    </div>
    <div class="tap">
      <div style="cursor: pointer;" @click="active_tab = 1">
         <div :class="{active:active_tab==1}">简介</div>
         <div :class="{line:active_tab==1}"></div>
      </div>
      <div style="margin-left:30px;cursor: pointer;" @click="active_tab = 2">
        <div :class="{active:active_tab==2}">目录</div>
        <div :class="{line:active_tab==2}"></div>
      </div>
    </div>
    <div class="introduction-content" v-if="active_tab == 1">
       <div class="content" v-html="current_content">
       </div>
    </div>
    <div class="directory" v-else>
      <div class="item" v-for="(item,index) in directory_data" :key="index">
      <div style="display: flex;">
      <div class="number">{{index+1}}</div>
      <div class="info" @click="switchContent(item.id)">
        <div class="title">{{item.audio_title}}</div>
         <div class="play-count">播放：{{item.views_count}}</div>
      </div>
        </div>
        <div class="line"></div>
      </div>
    </div>
   </d-list>
  </div>
</template>

<script>
import AudioPlayer from './audio_player.vue';
import DList from "@/components/dlist";
import emptyImage from '../../../src/assets/images/new_diy/image.png';
export default {
  data () {
    return {
      emptyImage,
      //1 简介  2 目录
      active_tab:1,
      current_content:'',
      fileurl:'',
      loading: false,
      isLoadMore: true, //判断是否要加载更多的标志
      page:1,
      last_page:0,
      directory_data:[],
      book_id:'',
      audio_img:'',
      audio_title:'',
      audio_id:''
    };
  },

  methods: {
    goBack(){
      this.$router.push(this.fun.getUrl("audio_book",{}));
    },
    switchContent(audio_id){
      this.getContent(audio_id);
      this.active_tab = 1;
      document.documentElement.scrollTop = 0;
    },
    handleChangeAudioVolume(){
      // 点击页面关闭音量键显示
      if (this.$refs.audio) this.$refs.audio.audioHuds = false;
    },
    getMoreData() {
      if(this.active_tab == 1){
        return;
      }
      if (this.loading === true || this.isLoadMore === false) {
        return;
      }
      this.loading = true; // 防止多次请求分页数据
      if (this.page >= this.last_page) {
        this.isLoadMore = false;
      } else {
        this.page += 1;
        let json = {
          book_id:this.book_id,
          page: this.page,
          page_size:10
        };
        $http
          .get("plugin.audio-book.frontend.audio.get-list", json, "...")
          .then(res => {
            this.loading = false;
            if (res.result == 1) {
              let nextPageData = res.data.data.data;
              this.dataList = this.listData.concat(nextPageData); //进行数组拼接
            } else {
              this.page = this.page - 1;
            }
          })
          .catch(error => {
            console.log(error);
          });
      }
    },
    getDirectoryData(id){
      let that = this;
      $http.get('plugin.audio-book.frontend.audio.get-list',{book_id:id},'').then(
        function(response) {
          const data = response.data.data;
          if (response.result === 1) {
            that.directory_data = data.data;
            that.last_page = data.last_page;
            that.page = data.current_page;
            that.dataList =  data.data;
          }else{
            console.log(response.msg);
          }
        }

      );
    },
    getContent(audio_id){
      let json = {book_id:this.book_id};
      if(audio_id){
        json = {
          book_id:this.book_id,
          audio_id
        };
      }
      let that = this;
      $http.get('plugin.audio-book.frontend.audio.get-detail',json,'').then(
        function(response) {
          let data = response.data.data;
          if (response.result === 1) {
            that.audio_img = data.image_url;
            that.audio_title = data.audio_title;
            that.current_content = data.content.replace(/<img/g,"<img style='max-width:100%;height:auto;'").replace(/<video/g, "<video style='width:100%;height:auto;'");
            that.audio_id = data.id;
            that.fileurl = data.audio_url;
            that.playLog();
          }else{
            console.log(response.msg);
          }
        }

      );
    },
    playLog(){
      let that = this;
      $http.get('plugin.audio-book.frontend.audio.memory-play-log',{book_id:that.book_id,audio_id:that.audio_id},'').then(
        function(response) {
          if (response.result === 1) {

          }else{
            console.log(response.msg);
          }
        }

      );
    }
  },

  created(){
    this.book_id = this.$route.query.id;
    this.getDirectoryData(this.book_id);
    this.getContent();
  },
  components: {
    AudioPlayer,
    DList
  },
};

</script>
<style lang='scss' rel='stylesheet/scss' scoped>
 .audio-info{
  background-color: #F5F5F5;
  .top{
    display: flex;
    margin-top: 0.6875rem;
    margin-left: 0.75rem;
    i{
      font-size: 1rem;
      cursor: pointer;
    }
  }
  .logo{
    margin-top: 1.5625rem;
    img{
    width: 12.8125rem;
    height: 12.8125rem;
    border-radius: 1rem;
    border: 0.0625rem solid #DEDEDE;
    }
  }
  .audio-info-middle{
    background-color: #ffffff;
    margin: 1.875rem 0.75rem 1.125rem 0.75rem;
    padding: 1.25rem 0.75rem 1rem 0.75rem;
    border-radius: 0.625rem;
    .message{
      text-align: left;
      font-weight: bold;
      font-size: 1.125rem;
      color: #00001C;
    }
    .audio{
      margin-top: 0.8125rem;
    }
  }
  .tap{
     display: flex;
     color: #6E6E79;
     font-size: 0.875rem;
     margin-left: 1.3125rem;
     .active{
      color: #00001C;
      font-size: 0.9375rem;
      font-weight: bold;
     }
     .line{
      width: 1.25rem;
      height: 0.1875rem;
      background-color: var(--themeBaseColor);
      border-radius: 0.9375rem;
      margin-top: 0.125rem;
      margin-left: 0.125rem;
     }
    }
  .introduction-content{
    margin: 0.75rem;
    padding: 1rem 0.75rem;
    background-color: #ffffff;
    border-radius: 0.625rem;
    .content{
      font-size: 0.8125rem;
      color: #3B3B4A;
      line-height: 1.0625rem;
      text-align: left;
      img{
        width: 100%;
      }
    }
    img{
    width: 100%;
    border-radius: 0.75rem 0.75rem 0.75rem 0.75rem;
    margin-top: 0.9375rem;
    }
   }
   .directory{
    margin: 0.75rem;
    padding: 1.4375rem 1.0625rem;
    background-color: #ffffff;
    border-radius: 0.625rem;
    .item{
      .number{
    font-size: 1.125rem;
    color: #6E6E79;
    line-height: 2.5625rem;
      }
      .info{
        margin-left: 1.125rem;
        text-align: left;
        cursor: pointer;
        .title{
          font-size: 0.9375rem;
          font-weight: bold;
        }
        .play-count{
          font-size: 0.8125rem;
          color: #6E6E79;
        }
      }
      .line{
        height:0.0625rem;
        background: #F0F0F1;
        margin: 1.0625rem 0;
      }
    }
   }
 }

</style>